<template>
  <div class="product-container">
    <el-button type="primary" style="width: 50px;height: 50px;position: fixed;bottom: 50%;right: 20px;" class="addProduct" icon="el-icon-plus" circle @click="showDialog('','add')"></el-button>
    <transition name="el-zoom-in-center">
      <el-row v-show="show" :gutter="100" style="width: 100%">
        <el-col :span="6" v-for="(product, index) in products" :key="product">
          <el-card :body-style="{ padding: '0px' }" class="product-card" shadow="hover">
           <li><div class="product-tag">{{product.name}}</div></li>
            <div :body-style="{height: '100px'}" @click="get(index)">
              <img :src="getImageUrl(product.images)" class="image">
            </div>
            <div style="position: absolute; bottom: 20px; width: 100% ">
              <div class="card-footer">
                <div style="margin-left: 10px">
                  <span class="time" ><img width="20px" height="20px" src="../../../assets/images/merchant/quaity.svg"/>{{product.quantity}} 份</span>
                  <span class="time" ><img width="20px" height="20px" src="../../../assets/images/merchant/money.svg"/> {{product.price}} / 份</span><br>
                  <time class="time"><img width="20px" height="20px" src="../../../assets/images/merchant/dec.svg"/>{{ product.description }}</time>
                </div>
                <el-popover placement="bottom"  style="margin-right: 10px" trigger="hover">
                  <div style="text-align: center; margin: 0">
                    <el-button size="primary" type="text"  @click="showDialog(index,'update')">编辑</el-button>
                    <el-button size="primary" type="text" @click="deleteProduct(index)">删除</el-button>
                  </div>
                  <el-button slot="reference" type="text" class="button">操作</el-button>
                </el-popover>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col style="padding: 10px 0 50px 0;display: flex;align-items: center;justify-content: center;" >
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1,2,8]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </transition>

    <el-dialog :title="productTitle" :visible.sync="dialogFormVisible"  width="30%">
      <el-form :model="dialogProduct">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="dialogProduct.name" style="width: 90%" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <el-input v-model="dialogProduct.description" style="width: 90%" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="dialogProduct.price" style="width: 90%" type="number" min="1" max="99999" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" :label-width="formLabelWidth">
          <el-input v-model="dialogProduct.quantity" style="width: 90%" type="number" min="1" max="99999" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item  label="商品图片" prop="identity.idCardPic" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="this.$common.getApiUrl(this.$common.ELE_MONKEY_SERVER_URL.BASE, this.$common.ELE_MONKEY_API.UPLOAD_FILE)"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="dialogProduct.images" :src="getImageUrl(dialogProduct.images)" class="avatarIdcard">
            <div v-else class="upload-tips-box">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmProduct()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'ProductCard',
  data: function () {
    return {
      currentDate: new Date(),
      total: 0,
      currentPage: 1,
      pageSize: 8,
      products: [],
      show: false,
      dialogFormVisible: false,
      addDialogFormVisible: false,
      dialogProduct: {
        name: '',
        description: '',
        price: '',
        quantity: '',
        images: ''
      },
      formLabelWidth: '120px',
      productTitle: ''
    }
  },
  created () {
    this.getProducts(this.$store.state.store.id, this.currentPage, this.pageSize)
  },
  methods: {
    deleteProduct: function (index) {
      if (this.products[index].id !== undefined) {
        this.$merchantAPI.product_delete(this.products[index].id).then((params) => {
          this.getProducts(this.$store.state.store.id, this.currentPage, this.pageSize)
        }).catch((params) => {
        })
      }
    },
    confirmProduct: function () {
      if (this.dialogProduct.id === undefined) {
        this.dialogProduct.storeId = this.$store.state.store.id
        this.$merchantAPI.product_add(this.dialogProduct).then((params) => {
          this.getProducts(this.$store.state.store.id, 1, this.pageSize)
        }).catch((params) => {
        })
      } else {
        this.$merchantAPI.product_update(this.dialogProduct).then((params) => {
          this.getProducts(this.$store.state.store.id, this.currentPage, this.pageSize)
        }).catch((params) => {
        })
      }
      this.dialogFormVisible = false
    },
    getImageUrl (imageUrl) {
      return this.$common.getResourceUrl(imageUrl)
    },
    showDialog: function (index, type) {
      if (type === 'update' && index !== '') {
        this.productTitle = '商品编辑'
        let filed = ''
        for (filed in this.products[index]) {
          this.dialogProduct[filed] = this.products[index][filed]
        }
      } else {
        this.productTitle = '商品添加'
        this.dialogProduct = {
          images: ''
        }
      }
      this.dialogFormVisible = true
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.getProducts(this.$store.state.store.id, 1, val)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.getProducts(this.$store.state.store.id, val, this.pageSize)
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    getProducts (storeId, page, pageSize) {
      this.$merchantAPI.store_products(storeId, page, pageSize).then((params) => {
        this.products = params.data.items
        this.pageSize = params.data['pageCount']
        this.total = params.data['itemTotal']
        this.currentPage = params.data['pageIndex']
        setTimeout(() => {
          this.show = true
        }, 100)
      }).catch((params) => {
      })
    },

    handleAvatarSuccess (res, file) {
      this.dialogProduct.images = res
      this.$alert('上传成功')
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
  .upload-tips-box {
    width: 250px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8c939d;
  }
  .avatar-uploader-icon {
    font-size: 22px;
    width: 80px;
    text-align: center;
  }
  .avatarIdcard {
    width: 250px;
    height: 150px;
    border-radius: 10px;
    box-sizing: border-box;
    display: block;
  }
  .avatar {
    width: 250px;
    height: 120px;
    border-radius: 10px;
    box-sizing: border-box;
    display: block;
  }
  .avatar-uploader:hover {
    border-color: #0091E8;
  }
  .avatar-box {
    width: 100%;
    margin: 22px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .addProduct{
    transition: all 1s ease-in-out;
  }

  .addProduct:hover{
    transform: scale(1.7);
  }
  .card-footer{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .product-container{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  img{
    cursor: pointer;
    transition: all 0.6s;
  }

  img:hover{
    transform: scale(0.8);
  }
  .product-card {
    width: 100%;
    height: 350px;
    position: relative;
    border-radius: 20px;
    margin-bottom: 30px;
    top: 0;
  }
  .product-tag{
    position: absolute;
    background: #F8A700;
    z-index: 999;
    border-radius: 3px;
    color: #fff;
    font-size: 1.3em;
    padding: 2px 4px 0;
    top: 5%;
    left: 2%;
    line-height: 1.4;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
    transition: transform 0.1s ease-in;
  }
  li{
    list-style: none;
  }
  li:hover .product-tag {
    transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    -webkit-transform: rotate(-14deg);
    /* This combined with the transition properties above rotates the badge on hover. */
  }
  .product-card:hover {
    top: -6px;
  }
  .time {
    font-size: 13px;
    color: grey;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 250px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
